export default {

  // 绘制文本
  drawText: function (canvasId,options){
    let c=document.getElementById(canvasId);
    if (!c.getContext) return
    let DEFAULTS = {
      x: 0,
      y: 0,
      text: '',
      color: '#fff',
      fontSize: 12,
      isFill: true,
      lineCap: 'butt'
    }
    if (!options){
      options = Object.assign({}, DEFAULTS, options);
    }
    let ctx =c.getContext("2d");
    ctx.font = options.fontSize + 'px' + ' sans-serif'
    if (options.isFill) {
      ctx.fillStyle = options.color
      ctx.fillText(options.text, options.x, options.y);
    }else{
      ctx.strokeStyle = options.color;
      ctx.strokeText(options.text, options.x, options.y)
    }
  },

  // 绘制矩形
  drawRect: function(canvasId,options){
    let c=document.getElementById(canvasId);
    if (!c.getContext) return
    let DEFAULTS = {
      x: 0,
      y: 0,
      width: 100,
      height: 100,
      text: '',
      color: '#fff',
      fontSize: 12,
      isFill: false,
    }
    if (!options){
      options = Object.assign({}, DEFAULTS, options);
    }
    let ctx =c.getContext("2d");
    ctx.fillStyle = options.color
    if (options.isFill) {
      ctx.fillRect(options.x, options.y, options.width, options.height);
    }else{
      ctx.strokeRect(options.x, options.y, options.width, options.height);
    }
  },

  // 绘制椭圆
  drawOval: function (canvasId,options) {
    let c=document.getElementById(canvasId);
    if (!c.getContext) return
    let DEFAULTS = {
      x: 0,
      y: 0,
      radius: 10,
      startAngle: 0,
      endAngle: Math.PI / 2,
      color: '#000',
      lineWidth: 1,
      isFill: true,
      anticlockwise: false
    }
    if (!options){
      options = Object.assign({}, DEFAULTS, options);
    }
    let ctx =c.getContext("2d");
    ctx.beginPath();
    ctx.arc(options.x, options.y, options.radius, options.startAngle, options.endAngle, options.anticlockwise);
    if (options.isFill){
      ctx.fill()
    } else{
      ctx.stroke();
    }
  },

  // 绘制直线（起点坐标,终点坐标,颜色,线宽,渐变）
  drawLine: function (canvasId,options) {
    let c=document.getElementById(canvasId);
    if (!c.getContext) return
    let DEFAULTS = {
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0,
      color: '#000',
      lineWidth: 1,
      isFill: true,
    }
    if (!options){
      options = Object.assign({}, DEFAULTS, options);
    }
    let ctx =c.getContext("2d");
    ctx.fillStyle = options.color
    ctx.lineWidth = options.lineWidth

    ctx.beginPath();
    ctx.moveTo(options.startX, options.startY);
    ctx.lineTo(options.endX, options.endY);
    ctx.closePath();
    ctx.stroke();
  },

  // 绘制多段线
  drawPolyline: function (canvasId,options) {
    let c=document.getElementById(canvasId);
    if (!c.getContext) return
    let DEFAULTS = {
      pointArray: [{x:0,y:0}],
      strokeColor: '#fff',
      lineWidth: 1,
    }
    if (!options){
      options = Object.assign({}, DEFAULTS, options);
    }
    let ctx =c.getContext("2d");
    ctx.fillStyle = options.strokeColor
    ctx.lineWidth = options.lineWidth

    ctx.beginPath();
    for (let i = 0; i < options.pointArray.length; ++i) {
      if (i === 0) {
        ctx.moveTo(options.pointArray[i].x, options.pointArray[i].y);
      }else{
        ctx.lineTo(options.pointArray[i].x, options.pointArray[i].y);
      }
    }
    ctx.stroke();
  },

  // 绘制多边形
  drawPolygon: function (canvasId,options) {
    let c=document.getElementById(canvasId);
    if (!c.getContext) return
    let DEFAULTS = {
      pointArray: [{x:0,y:0}],
      strokeColor: '#000',
      fillColor: '#fff',
      lineWidth: 1,
      isFull: true
    }
    if (!options){
      options = Object.assign({}, DEFAULTS, options);
    }
    let ctx =c.getContext("2d");
    ctx.fillStyle = options.strokeColor
    ctx.lineWidth = options.lineWidth

    ctx.beginPath();
    for (let i = 0; i < options.pointArray.length; ++i) {
      if (i === 0) {
        ctx.moveTo(options.pointArray[i].x, options.pointArray[i].y);
      }else{
        ctx.lineTo(options.pointArray[i].x, options.pointArray[i].y);
      }
    }
    ctx.closePath();
    if (options.isFull) {
      ctx.fillStyle = options.fillColor
      ctx.fill()
    }else{
      ctx.strokeStyle = options.strokeColor
      ctx.stroke();
    }
  },

  // 绘制二次贝塞尔曲线
  darwBezierTwo: function (canvasId,options) {
    let c=document.getElementById(canvasId);
    if (!c.getContext) return
    let DEFAULTS = {
      startPoint: {x:0,y:0},
      controlPoint: {x:0,y:0},
      endPoint: {x:0,y:0},
      strokeColor: '#000',
      fillColor: '#fff',
      lineWidth: 1,
      isFull: true
    }
    if (!options){
      options = Object.assign({}, DEFAULTS, options);
    }
    let ctx =c.getContext("2d");
    ctx.strokeStyle = options.strokeColor
    ctx.beginPath();
    ctx.moveTo(options.startPoint.x, options.startPoint.y); //起始点
    ctx.quadraticCurveTo(options.controlPoint.x, options.controlPoint.y, options.endPoint.x, options.endPoint.y);
    if (options.isFull){
      ctx.fillStyle = options.fillColor
      ctx.closePath()
    } else{
      ctx.stroke();
    }
  },

  // 绘制图片
  drawImg: function (canvasId,options) {
    let c=document.getElementById(canvasId);
    if (!c.getContext) return
    let DEFAULTS = {
        imgUrl: '',
        x: 0,
        y: 0
    }
    if (!options){
      options = Object.assign({}, DEFAULTS, options);
    }
    let ctx =c.getContext("2d");
    let img = new Image();
    img.src = options.imgUrl;
    img.onload = function () {
      ctx.drawImage(img, options.x, options.y)
    }
  }

}
